<template>
	<view class="uni-searchbar" :class="{'bigSearch':bigSearch}">
		<view :style="{backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick">
			<view class="uni-searchbar__box-icon-search">
				<image src="../../static/img/icon_search.png" mode=""></image>
			</view>
			<!-- <input 
			:focus="showSync" 
			:placeholder="placeholder" 
			:maxlength="maxlength" 
			@confirm="confirm" 
			class="uni-searchbar__box-search-input"
			confirm-type="search" type="text" 
			v-model="searchVal" /> -->
			<input
			 
			:focus="showSync"
			:maxlength="maxlength" 
			class="uni-searchbar__box-search-input"
			confirm-type="search" 
			type="text" 
			v-model="searchVal" 
			@confirm="confirm"  
			@change="show = true"/>
			
			<text v-show="searchVal == ''"  class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
			
			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" 
			class="uni-searchbar__box-icon-clear" @click="clear">
				<uni-icons color="#bebebe" size="24" type="clear" />
			</view>
		</view>
		<!-- <text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelText}}</text> -->
	</view>
</template>

<script>
	import uniIcons from "../uni-icons/uni-icons.vue";
	export default {
		name: "UniSearchBar",
		components: {
			uniIcons
		},
		props: {
			placeholder: {
				type: String,
				default: "搜地点、查设备、找窨井"
			},
			radius: {
				type: [Number, String],
				default: 5
			},
			clearButton: {
				type: String,
				default: "auto"
			},
			cancelButton: {
				type: String,
				default: "auto"
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			bgColor: {
				type: String,
				default: "#fff"
			},
			maxlength: {
				type: [Number, String],
				default: 100
			},
			bigSearch:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				showSync: false,
				searchVal: ""
			}
		},
		watch: {
			searchVal() {
				this.$emit("input", {
					value: this.searchVal
				})
			}
		},
		methods: {
			searchClick() {
				if (this.show) {
					return
				}
				this.searchVal = ""
				this.show = true;
				this.$nextTick(() => {
					this.showSync = true;
				})
			},
			clear() {
				this.show = false
				this.searchVal = ''
				this.$nextTick(() => {
					this.showSync = false;
				})
				this.$emit("confirm", {
					value: this.searchVal
				})
			},
			// cancel() {
			// 	this.$emit("cancel", {
			// 		value: this.searchVal
			// 	});
			// 	this.searchVal = ""
			// 	this.show = false
			// 	this.showSync = false
			// 	// #ifndef APP-PLUS
			// 	uni.hideKeyboard()
			// 	// #endif
			// 	// #ifdef APP-PLUS
			// 	plus.key.hideSoftKeybord()
			// 	// #endif
			// },
			confirm() {
				// #ifndef APP-PLUS
				uni.hideKeyboard();
				// #endif
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord()
				// #endif
				this.$emit("confirm", {
					value: this.searchVal
				})
			},
			// blur() {
			// 	// #ifndef APP-PLUS
			// 	uni.hideKeyboard();
			// 	// #endif
			// 	// #ifdef APP-PLUS
			// 	plus.key.hideSoftKeybord()
			// 	// #endif
			// 	this.$emit("blur", {
			// 		value: this.searchVal
			// 	})
			// }
		}
	};
</script>

<style lang="scss" scoped>
	$uni-searchbar-height: 68rpx;

	.uni-searchbar {
		display: flex;
		position: relative;
		border-radius: 68rpx;
		height: 68rpx;
		width: 502rpx;
	}

	.uni-searchbar__box {
		display: flex;
		overflow: hidden;
		position: relative;
		flex: 1;
		align-items: center;
		height: $uni-searchbar-height;
		border-width: 0.5px;
		border-style: solid;
		border-color: $uni-border-color;
		border-radius: $uni-searchbar-height;
	}

	.uni-searchbar__box-icon-search {
		display: flex;
		width: 72rpx;
		justify-content: center;
		align-items: center;
		image{
			height: 36rpx;
			width: 36rpx;
		}
	}

	.uni-searchbar__box-search-input {
		flex: 1;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		height: 100%;
	}

	.uni-searchbar__box-icon-clear {
		align-items: center;
		margin-right: $uni-spacing-col-base;
	}

	.uni-searchbar__text-placeholder {
		font-size: $uni-font-size-base;
		color: $uni-text-color-placeholder;
		font-size: 28rpx;
		color: #999;
		position: absolute !important;
		top: 50%;
		transform: translateY(-50%);
		/* z-index: 9999; */
		left: 75rpx;
	}

	.uni-searchbar__cancel {
		padding-left: 10px;
		line-height: $uni-searchbar-height;
		font-size: 14px;
		color: $uni-text-color;
	}
	
	// 地图页面的搜索控件样式
	.bigSearch{
		width: 100%;
	}
</style>
